import React, {Component} from 'react'
import {connect } from 'react-redux'
import {IntlProvider, addLocaleData} from 'react-intl'
import en from 'react-intl/locale-data/en'
import zh from 'react-intl/locale-data/zh'
import {actionFunc} from './store'
addLocaleData([...en, ...zh])


class Intl extends Component {
    render() {
        const {locale,localeMessage} = this.props
        return (
            <IntlProvider key={locale} locale={locale} messages={localeMessage}>
                {this.props.children}
            </IntlProvider>
        )
    }
    componentWillMount(){
        this.props.initLocale()
    }
}

const mapState = (state) => ({
    locale: state.getIn(['intl', 'locale']),
    localeMessage:state.getIn(['intl', 'localeMessage']).toJS(),
})
const mapDispatch = (dispatch) => ({
    initLocale(){
        dispatch(actionFunc.changeLocale())
    }
})

export default connect(mapState, mapDispatch)(Intl)
